import React, { Component } from 'react';
import { Tabs } from 'antd'
import { connect } from "dva";
const { TabPane } = Tabs

class Frame extends Component {
  constructor(props) {
    super(props);
    this.state = {  
      activeKey:null,

    }
  }

  onChange = (activeKey) => this.props.dispatch({
    type:'tabs/change',
    payload:activeKey
  })

  onEdit = (targetKey, action) => {
    this[action](targetKey)
  }

  remove = key => {
    this.props.dispatch({
      type:'tabs/remove',
      payload:key
    })
  }

  renderTabBar = (props) => {
  }

  render() {
    return (
      <Tabs
        activeKey={this.props.tabs.activeKey}
        type="editable-card"
        onChange={this.onChange}
        onEdit={this.onEdit}
        hideAdd
        style={{flex: 1}}
        tabBarGutter={2}
        tabBarStyle={{backgroundColor:'#fff', paddingTop:'10px'}}
      >
        {this.props.tabs.tabs.map(tab => (
          <TabPane tab={tab.label} key={tab.key} forceRender>
            {tab.component}
          </TabPane>
        ))}
      </Tabs>
    );
  }
}
export default connect(({tabs}) => ({tabs}))(Frame)